import { Button } from "antd";
import { LinkOutlined } from "@ant-design/icons";
import { memo, useState } from "react";
import { useAppDispatch, useAppSelector } from "../../../../store";
import { Modal } from "@arco-design/web-react";
import { ModalBodyWrapper } from "./style";
import defaultImg from "../../../../assets/img/defaultimg.webp";
import dayjs from "dayjs";
const Detail = ({
  userId,
  getDetailInfo,
}: {
  userId: number;
  getDetailInfo: (userId: number) => void;
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { patientDetailInfo } = useAppSelector((state) => state.patient);
  const toggleModal = (target: boolean) => {
    setIsModalOpen(target);
    if (target && userId && getDetailInfo) {
      getDetailInfo(userId);
    }
  };

  return (
    <>
      <Button
        icon={<LinkOutlined />}
        size="small"
        type="link"
        style={{ gap: "2px", width: "70px", height: "16px" }}
        onClick={() => toggleModal(true)}
      >
        详情
      </Button>
      <Modal
        style={{ width: "600px" }}
        title="病人详情"
        visible={isModalOpen}
        onCancel={() => toggleModal(false)}
        footer={
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-end",
            }}
          >
            <Button
              type="primary"
              key="sure"
              onClick={() => toggleModal(false)}
            >
              确定
            </Button>
          </div>
        }
      >
        <ModalBodyWrapper>
          <div className="user-profile">
            <div className="avatar-section">
              <img
                src={
                  patientDetailInfo?.avatar
                    ? `http://119.29.235.74:20242${patientDetailInfo.avatar}`
                    : defaultImg
                }
                alt="用户头像"
                className="avatar"
              />
              <div className="basic-info">
                <h3>{patientDetailInfo?.name}</h3>
                {/* <p className="nickname">{patientDetailInfo?.nickName}</p> */}
                <div className="tags">
                  <span className="tag">
                    <span>性别：</span>

                    {patientDetailInfo?.sex === "1" ? "女" : "男"}
                  </span>

                  {/* <span className="tag">
                    <span>电话号码：</span>
                    {patientDetailInfo?.phonenumber}
                  </span> */}
                </div>
              </div>
            </div>

            <div className="info-grid">
              <div className="info-card">
                <h4>联系信息</h4>
                <div className="info-item">
                  <span className="label">邮箱:</span>
                  <span>{patientDetailInfo?.email || "未填写"} </span>
                </div>
                <div className="info-item">
                  <span className="label">电话号码:</span>
                  <span>{patientDetailInfo?.phonenumber}</span>
                </div>
              </div>

              <div className="info-card">
                <h4>医疗信息</h4>
                <div className="info-item">
                  <span className="label">手术名称:</span>
                  <span>{patientDetailInfo?.operation || "未填写"}</span>
                </div>
                <div className="info-item">
                  <span className="label">手术时间:</span>
                  <span>
                    {dayjs(patientDetailInfo?.operationDate).format(
                      "YYYY年MM月DD日"
                    ) || "未填写"}
                  </span>
                </div>
                <div className="info-item">
                  <span className="label">住院时间:</span>
                  <span>
                    {dayjs(patientDetailInfo?.hospitalizationDate).format(
                      "YYYY年MM月DD日"
                    ) || "未填写"}
                  </span>
                </div>
              </div>

              <div className="info-card full-width">
                <h4>病史记录</h4>
                <div className="info-item">
                  <span className="label">病例:</span>
                  <span>{patientDetailInfo?.medicalRecord || "未填写"}</span>
                </div>
                <div className="info-item">
                  <span className="label">既往病史:</span>
                  <span>
                    {patientDetailInfo?.pastMedicalHistory || "未填写"}
                  </span>
                </div>
                <div className="info-item">
                  <span className="label">家族病史:</span>
                  <span>{patientDetailInfo?.familyHistory || "未填写"}</span>
                </div>
              </div>
            </div>
          </div>
        </ModalBodyWrapper>
      </Modal>
    </>
  );
};
export default memo(Detail);
